<template>
    <div :style="styles" :id="id"></div>
</template>
    
<script>

import * as echarts from 'echarts/core';
import { BarChart, PieChart, LineChart } from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    DatasetComponent
} from 'echarts/components';
import {
    CanvasRenderer
} from 'echarts/renderers';
echarts.use(
    [
        TitleComponent,
        TooltipComponent,
        GridComponent,
        BarChart,
        PieChart,
        LineChart,
        LegendComponent,
        DatasetComponent,
        CanvasRenderer
    ]
);
export default {
    name: 'ChartBar6',
    components: {
    },
    props: {
        id: {
            default: 'myChart2'
        },
        styles: {
            default: { width: '700px', height: '500px' }
        },
        allList: {
            default: [{ value: 17, name: "在售" }, { value: 27, name: "在租" }, { value: 7, name: "未录" },
            { value: 53, name: "其它" }]
        },
        bottomList: {
            default: ['在售', '在租', '未录', '其它']
        },
        title: {
            default: '小区整体控盘度'
        },
    },
    data() {
        return {
        }
    },
    mounted() {
        this.draw();
    },
    methods: {
        draw() {
            let myChart = echarts.init(document.getElementById(this.id))
            myChart.setOption({
                title: {
                    text: this.title
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['一月', '二月', '三月', '四月', '五月', '六月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        color: '#a6e0fa',
                        stack: 'Total',
                        areaStyle: {
                        },
                        emphasis: {
                            focus: 'series'
                        },
                    }
                ]

            });
        }

    },
    watch: {
    },
    computed: {
    }

}
</script>
    
<style scoped>
.d1 {
    width: 500px;
    height: 500px;
    margin-left: 20px;
}
</style>